<template>
  <div class="changeinp">
    <van-sticky>
      <div class="search-top">
        <p class="btn-new" @click="getBack">
          <img src="../assets/images/Return.png" alt="" />
        </p>
        <van-search
          v-model="value"
          show-action
          left="地址"
          placeholder="请输入搜索关键词"
          shape="round"
          @focus="onPack"
        >
          <template #action>
            <div class="btn-search">搜索</div>
          </template>
        </van-search>
      </div>
    </van-sticky>

    <van-sticky :offset-top="54">
      <div class="content-list">
        <div class="nav-list">
          <van-tabs v-model="active" @click="getId(active)" animated>
            <van-tab
              v-for="(item, index) in fenleiData"
              :key="index"
              :title="item.categoryName"
            >
            </van-tab>
          </van-tabs>
        </div>
      </div>
    </van-sticky>

    <div class="list-box">
      <div class="item">
        <div class="card" v-for="(item, index) in itemList" :key="index">
          <van-card
            @click="goToDetail(item.albumInfo.id)"
            :desc="item.albumInfo.custom_title"
            :title="item.albumInfo.title"
            :thumb="item.albumInfo.cover_path"
            currency=""
          >
          </van-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "changeinp",
  data() {
    return {
      kwWord: "",
      value: "",
      flag: false,
      fenleiData: [],
      active: 0,
      itemList: [],
      num: -1,
    };
  },
  created() {
    // this.getValData();
    let inpVal = this.$route.params.value;
    console.log(inpVal);
    this.kwWord = inpVal;
    this.getValData(this.kwWord);
    this.getListData(this.kwWord, this.num);
  },
  methods: {
    getBack() {
      this.$router.go(-1);
    },
    getValData(kwWord) {
      this.axios({
        methods: "get",
        url: "https://apis.netstart.cn/ximalaya/search/allCategory",
        params: {
          kw: kwWord,
        },
      })
        .then((result) => {
          // console.log(result.data.data.categories);
          this.fenleiData = result.data.data.categories;
        //   console.log(this.fenleiData);
        })
        .catch((err) => {
          console.log(err);
        });
    },

    getListData(kwWord, num) {
      this.axios({
        methods: "get",
        url: "https://apis.netstart.cn/ximalaya/search?core=album&page=1&rows=20&condition=relation&paidFilter=true&fq=is_paid:false,",
        params: {
          kw: kwWord,
          category_id: num,
        },
      })
        .then((result) => {
          //   console.log(result.data.data.albumViews.albums);
          this.itemList = result.data.data.albumViews.albums;
          // console.log(this.itemList);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    goToDetail(id) {
      // console.log(id);
      this.$router.push({ name: "Detail", params: { id } });
    },
    getId(active) {
      //   console.log(active);
      let num = this.fenleiData[active].categoryId;
    //   console.log(num);
      this.getListData(this.kwWord, num);
    },
    onPack() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="less" scoped>
.search-top {
  background-color: white;
  .btn-new {
    display: inline-block;
    float: left;
    font-size: 24px;
    margin-top: 15px;
    margin-left: 5px;
    color: #ccc;
    height: 10px;
    img {
      width: 20px;
    }
  }
}
.btn-search {
  color: #e4393c;
}

/deep/.van-card__thumb img {
  height: 80px;
  width: 80px;
}
/deep/.van-card__title {
  color: #000;
  font-size: 13px;
}
</style>